/* ========================= */
/*       Elements            */
/* ========================= */

/* a */
a.activities img {
	background: transparent url(../images/icon-scoreboard.png) top left
		no-repeat;
	display: block;
}

a.activities:hover img {
	background: transparent url(../images/icon-scoreboard-over.png) top left
		no-repeat;
	display: block;
}

a.advanced img {
	background: transparent url(../images/icon-advanced.png) top left
		no-repeat;
	display: block;
}

a.advanced:hover img {
	background: transparent url(../images/icon-advanced-over.png) top left
		no-repeat;
	display: block;
}

a.energy img {
	background: transparent url(../images/icon-go-low.png) top left
		no-repeat;
	display: block;
}

a.energy:hover img {
	background: transparent url(../images/icon-go-low-over.png) top left
		no-repeat;
	display: block;
}

a.help img {
	background: transparent url(../images/icon-help.png) top left no-repeat;
	display: block;
}

a.help:hover img {
	background: transparent url(../images/icon-help-over.png) top left
		no-repeat;
	display: block;
}

a.home img {
	background: transparent url(../images/icon-home.png) top left no-repeat;
	display: block;
}

a.home:hover img {
	background: transparent url(../images/icon-home-over.png) top left
		no-repeat;
	display: block;
}

a.news img {
	background: transparent url(../images/icon-news.png) top left no-repeat;
	display: block;
}

a.news:hover img {
	background: transparent url(../images/icon-news-over.png) top left
		no-repeat;
	display: block;
}

a.prizes img {
	background: transparent url(../images/icon-prizes.png) top left
		no-repeat;
	display: block;
}

a.prizes:hover img {
	background: transparent url(../images/icon-prizes-over.png) top left
		no-repeat;
	display: block;
}

a.profile img {
	background: transparent url(../images/icon-profile.png) top left
		no-repeat;
	display: block;
}

a.profile:hover img {
	background: transparent url(../images/icon-profile-over.png) top left
		no-repeat;
	display: block;
}

a.water img {
	background: transparent url(../images/icon-water.png) top left no-repeat;
	display: block;
}

a.water:hover img {
	background: transparent url(../images/icon-water-over.png) top left
		no-repeat;
	display: block;
}

/* body */
body {
	margin: 0;
	padding: 0;
	text-align: center;
}

/* fieldset */
fieldset {
	border: 0;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	margin-top: -10px;
}

fieldset legend {
	font-weight: bold;
	text-align: left;
	text-decoration: underline;
	padding: 25px 0 0 0;
}

/* img */
img {
	border: none;
}

/* ========================= */
/*       Classes             */
/* ========================= */

/* .container */
/* Set background to null for containers and default content area */
.container,.content {
	background: none;
}

/* Set Common Shadows and border radius across all objects which plan to use it. */
.content {
	border-radius: 8px 8px 8px 8px;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

/* .content-box */
.content-box {
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	padding-bottom: 8px;
	margin-bottom: 15px;
	opacity: 0.94;
}

/* smaller and lighter shadow used inside the content boxes */
.content-box-shadow {
	box-shadow: 0 0 3px 3px #222;
	-moz-box-shadow: 0 0 3px 3px #222;
	-webkit-box-shadow: 0 0 3px 3px #222;
}

/* .content-box-title */
/* formating for title area on widgets, create rounded corners at the top, set font weight and opacity */
.content-box-title {
	height: 29px;
	margin: 0;
	padding: 0;
	line-height: 29px;
	font-weight: bold;
	border-top-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	-moz-border-radius-topright: 8px;
	-webkit-border-top-right-radius: 8px;
	opacity: .99;
}

/* ++++++++++++++++++++++++++++++++++++++*/

.horizontalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
    height: 300px;
}
 
.horizontalaccordion>ul>li {
    display:block;
    overflow: hidden;
    float:left;
    margin: 0;
    padding: 0;
    list-style:none;
    width:40px;
    height: 300px;
 
    /* Decorative CSS */
    background:#f0f0f0;
 
    /* CSS3 Transitions */
    transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
}
 
.horizontalaccordion>ul>li>h3 {
    display:block;
    float:left;
    margin: 0;
    padding:10px;
    height:19px;
    width:280px;
 
    /* Decorative CSS */
    border-left:#f0f0f0 1px solid;
    text-decoration:none;
    color: #000;
    background:#cccccc;
 
    /* CSS3 Transform Rotate & Translate */
    white-space:nowrap;
    -moz-transform: rotate(90.0deg) translate(-40px,0px);  /* FF3.5+ */
    -moz-transform-origin: 0 100%;
    -o-transform: rotate(90.0deg) translate(-40px,0px);  /* Opera 10.5 */
    -o-transform-origin: 0 100%;
    -webkit-transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    -webkit-transform-origin: 0 100%;
    transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    transform-origin: 0 100%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
            progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE8 */
 
    /* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #999999, #cccccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}
 
.horizontalaccordion>ul>li>div {
    display:none;
    float:left;
    overflow: auto;
    position:relative;
    top:-40px;
    left:40px;
    *top:0px;       /* IE7 Hack */
    *left:0px;      /* IE7 Hack */
    margin:0;
    width:320px;
    height:280px;
    padding:10px;
}
 
.horizontalaccordion>ul>li:hover {
    overflow: hidden;
    width: 380px;
}
 
.horizontalaccordion:hover>ul>li:hover>div {
    display:block;
}
 
.horizontalaccordion:hover>ul>li:hover>h3 {
    /* Decorative CSS */
    color:#fff;
    background:#000000;
 
    /* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
    background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
            progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";   /* IE 8 */
}
 
.horizontalaccordion>ul>li>h3:hover {
    cursor:pointer;
}

/* ++++++++++++++++++++++++++++++++++++++*/
/* .nav-bar-inner */
.navbar-inner {
	border-radius: 8px 8px 8px 8px;
	box-shadow: 3px 3px 8px #000;
	-moz-box-shadow: 3px 3px 8px #000;
	-webkit-box-shadow: 3px 3px 8px #000;
}
/* .quest-options */
.quest-options {
	float: right;
}

/* ========================= */
/*       IDs                 */
/* ========================= */
#feedback-logout {
	
}

/* #header-logout */
#header-logout {
	position: absolute;
	top: 0;
	right: 8px;
}

/* #header-nav-links */
/* #header-round-info */
#info-bar-single {
	background: none;
	background-image: none;
	border-radius: none;
	box-shadow: none;
	display: none;
	height: 55px;
	margin-bottom: none;
	padding: none;
	text-align: center;
}

#info-bar-wide {
	border-radius: 3px;
	box-shadow: 3px 3px 5px #000;
	-moz-box-shadow: 3px 3px 5px #000;
	-webkit-box-shadow: 3px 3px 5px #000;
	padding: 5px 0;
	margin-bottom: 20px;
}

#info-bar-wide h4,#info-bar-single h4 {
	text-align: center;
}

#info-bar-wide ul,#info-bar-single ul {
	list-style: none outside none;
}

#info-bar-wide li {
	display: block;
}
/* #quest-box */
/*------- Quest styles -----*/
#quest-box {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	padding: 5px;
}

#quest-box h4 {
	margin: 5px 0;
}

#quest-complete-dialog {
	text-align: left;
}

#quest-contents {
	text-align: left;
}

#quest-hide {
	float: right;
	display: block;
	font-weight: bold;
	padding-right: 10px;
	padding-top: 3px;
}

#quest-help-icon {
	height: 17px;
	cursor: pointer;
	float: right;
}

#quest-list {
	list-style: none;
	padding: 0;
	margin: 5px auto 1px;
	text-align: center;
}

#quest-list li {
	margin: 0px;
	padding: 0 2px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	display: inline;
}

#quest-list li a {
	font-size: 1.1em;
}

#quest-title {
	margin: 0;
	display: inline;
	vertical-align: bottom;
	float: left;
	text-align: center;
	width: 95%;
	margin-left: 25px;
}

@media ( min-width : 641px) and (max-width: 979px) {
	/* hide icons from nav bar */
	.nav img {
		display: none;
	}
}

/* Query to remove images up to tablet width.*/
@media ( min-width : 480px) and (max-width: 821px) {
	.nav li a img {
		display: none;
	}
	.nav li a:hover img {
		display: none;
	}
}

/* for small screen widths hide the wide info-bar */
@media ( max-width : 640px) {
	a.activities img,a.activities:hover img,a.advanced img,a.advanced:hover img,a.energy img,a.energy:hover img,a.help img,a.help:hover img,a.home img,a.home:hover img,a.news img,a.news:hover img,a.prizes img,a.prizes:hover img,a.profile img,a.profile:hover img,a.water img,a.water:hover img
		{
		display: none;
	}
	.navbar {
		margin-bottom: 5px;
	}
	#feedback-logout {
		position: absolute;
		right: 8px;
		top: 0;
	}
	#info-bar-wide {
		background: none;
		background-image: none;
		border-radius: none;
		box-shadow: none;
		display: none;
		padding: none;
		margin-bottom: none;
	}
	#info-bar-single {
		background: #E3E3E3;
		background-image: -moz-linear-gradient(100% 50% 90deg, #E3E3E3, #A1A1A1);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#E3E3E3),
			to(#BBB) );
		border-radius: 3px;
		box-shadow: 3px 3px 5px #000;
		-moz-box-shadow: 3px 3px 5px #000;
		-webkit-box-shadow: 3px 3px 5px #000;
		padding: 5px 0;
		display: block;
	}
	#quest-list {
		padding: 0px;
	}
	#quest-list li {
		display: block; /* make them vertical */
		margin: 5px;
		padding: 0px;
	}
	#quest-title {
		margin: 0px;
	}
}